spb/websensor

1import { Skeleton, SkeletonPanel, SkeletonRows } from "@/components/ui";23export default function Loading() {4  return (5    <>6      <div className="mb-3">7        <Skeleton className="mb-1 h-2.5 w-24" />8        <Skeleton className="h-5 w-48" />9        <Skeleton className="mt-2 h-3 w-full max-w-2xl" />10      </div>11      <div className="panel mb-4 grid grid-cols-2 divide-x divide-line sm:grid-cols-4">12        {Array.from({ length: 4 }, (_, i) => (13          <div key={i} className="flex flex-col gap-1.5 px-3 py-2">14            <Skeleton className="h-2.5 w-16" />15            <Skeleton className="h-5 w-12" />16            <Skeleton className="h-2.5 w-20" />17          </div>18        ))}19      </div>20      <div className="grid gap-4 xl:grid-cols-[1fr_360px]">21        <div className="flex flex-col gap-4">22          <div className="panel">23            <div className="border-b border-line px-3 py-2"><Skeleton className="h-2.5 w-32" /></div>24            <SkeletonRows rows={5} />25          </div>26          <div className="grid gap-4 md:grid-cols-2">27            {Array.from({ length: 4 }, (_, i) => (28              <div key={i} className="panel">29                <div className="border-b border-line px-3 py-2"><Skeleton className="h-2.5 w-24" /></div>30                <SkeletonRows rows={4} />31              </div>32            ))}33          </div>34        </div>35        <div className="flex flex-col gap-4">36          <SkeletonPanel lines={6} />37          <SkeletonPanel lines={10} />38        </div>39      </div>40    </>41  );42}43